<template>
  <div id="app">
    <header>
      <div v-if="!isAuthenticated">
        <el-button @click="showLogin = !showLogin" style="position: fixed; top: 10px; right: 10px;">
          登录
        </el-button>
        <div v-if="showLogin" style="margin-top: 20px; max-width: 300px; margin: 0 auto;">
          <el-input v-model="username" placeholder="用户名" style="margin-bottom: 10px; width: 100%;" @keydown.enter="login"></el-input>
          <el-input v-model="password" type="password" placeholder="密码"
            style="margin-bottom: 10px; width: 100%;" @keydown.enter="login"></el-input>
          <el-button @click="login" style="width: 100%;">登录</el-button>
        </div>
      </div>
      <div v-else>
        <el-button @click="logout" style="position: fixed; top: 10px; right: 10px;">注销</el-button>
      </div>

      <!-- 普通用户菜单 -->
      <nav v-if="user.role === 'user'">
        <router-link to="/week-menu">查看菜单</router-link>
      </nav>

      <!-- 管理员菜单 -->
      <nav v-else-if="user.role === 'admin'">
        <router-link to="/AddDish">添加菜品</router-link> |
        <router-link to="/dishes">菜品管理</router-link> |
        <router-link to="/meal-plan">菜单计划</router-link> |
        <router-link to="/week-mune">查看菜单</router-link>
      </nav>
      <!--默认的菜单样式
      <nav>
        <router-link to="/">添加菜品</router-link> |
        <router-link to="/dishes">菜品管理</router-link> |
        <router-link to="/rate">菜品评分</router-link> |
        <router-link to="/meal-plan">菜单计划</router-link>
        <router-link to="/week-menu">一周菜单安排</router-link>
      </nav>
      -->
    </header>
    <router-view />
  </div>
</template>

<script>
import axios from 'axios';
import apiClient from './api';

export default {
  name: 'App',
  data() {
    return {
      username: '',
      password: '',
      user: {
        role: 'user' // 默认角色是普通用户
      },
      isAuthenticated: false, // 默认未认证
      showLogin: false // 默认不显示登录输入框
    };
  },
  methods: {
    async login() {
      if (!this.username || !this.password) {
        this.$message.error('用户名和密码不能为空');
        return;
      }

      try {
        console.log('Attempting to login with:', this.username, this.password); // 打印调试信息
        const response = await apiClient.post('/login', {
          username: this.username,
          password: this.password
        });
        //console.log('Response received:', response.data); // 打印调试信息
        if (response.data.success) {
          this.user.role = response.data.role;
          this.isAuthenticated = true;
          this.showLogin = false; // 隐藏登录输入框
          // 保存登录状态到 localStorage
          localStorage.setItem('userRole', this.user.role);
          localStorage.setItem('isAuthenticated', true);
          if (this.user.role === 'admin') {
            this.$router.push('/dishes');
          } else {
            this.$router.push('/week-menu');
          }
        } else {
          this.$message.error('用户名或密码错误');
        }
      } catch (error) {
        //console.error('Error occurred during login:', error); // 打印详细的错误信息
        this.$message.error('请求失败');
      }
    },
    logout() {
      // 注销逻辑
      this.user.role = 'user';
      this.isAuthenticated = false;
      localStorage.removeItem('userRole');
      localStorage.removeItem('isAuthenticated');
      this.$router.push('/');
    }
  },
  created() {
  const userRole = localStorage.getItem('userRole');
  const isAuthenticated = localStorage.getItem('isAuthenticated');

  if (isAuthenticated) {
    this.user.role = userRole;
    this.isAuthenticated = true;
  }
}
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

nav a {
  font-weight: bold;
  color: #42b983;
  text-decoration: none;
  margin: 0 15px;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>